<template>
  <div class="clearFix writeOff">
    <!-- <nav-path :navOption="navOption"></nav-path> -->
    <!--搜索-->
    <div class="search clearFix mt30">
      <div class="clearFix">
        <el-col class="conditions clearFix">
          <!--提交人-->
          <el-col :span="5">
            <div class="iccid qinmo-input clearFix">
              <label class="label label-90" for="startDate">提交人&nbsp;:</label>
              <div class="input-wrapper input-wrapper-90">
                  <el-input id="submitter" name="submitter" type="text"  v-model="accountId" placeholder="请输入提交人"></el-input>
              </div>
            </div>
          </el-col>
          <!--开始时间-->
          <el-col :span="5">
            <div class="iccid qinmo-input clearFix">
              <label class="label label-90" for="startDate">开始时间&nbsp;:</label>
              <div class="input-wrapper input-wrapper-90">
                <el-date-picker
                  v-model="startDate1"
                  name="startDate"
                  type="date"
                  placeholder="选择日期" style="width: 100%;">
                </el-date-picker>
              </div>
            </div>
          </el-col>
          <!--结束时间-->
          <el-col :span="5">
            <div class="iccid qinmo-input clearFix">
              <label class="label label-90" for="endDate">结束时间&nbsp;:</label>
              <div class="input-wrapper input-wrapper-90">
                <el-date-picker
                  v-model="endDate"
                  name="endDate"
                  type="date"
                  placeholder="选择日期" style="width: 100%;">
                </el-date-picker>
              </div>
            </div>
          </el-col>

        </el-col>
        <el-col class="conditions clearFix">
          <!--状态-->
          <el-col :span="5">
            <div class="iccid qinmo-input clearFix">
              <label for="applyType" class="label label-90">操作状态&nbsp;:</label>
              <div class="input-wrapper input-wrapper-90">
                <el-select name="applyType" popper-class="dark" clearable v-model="type" placeholder="请选择状态" style="display: block">
                  <el-option
                    label="成功"
                    value="0">
                  </el-option>
                  <el-option
                    label="失败"
                    value="1">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="iccid qinmo-input clearFix">
              <label for="zone" class="label label-90">动作&nbsp;:</label>
              <div class="input-wrapper input-wrapper-90">
                <el-select popper-class="dark" v-model="action" clearable placeholder="请选择" style="display: block">
                  <el-option
                    label="注销"
                    value="5">
                  </el-option>
                  <el-option
                    label="停用"
                    value="4">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="iccid qinmo-input clearFix">
              <label for="zone" class="label label-90">操作类型&nbsp;:</label>
              <div class="input-wrapper input-wrapper-90">
                <el-select popper-class="dark" v-model="activeType" clearable placeholder="请选择" style="display: block">
                  <el-option
                    v-for="(item, index) in zoneOption"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
          </el-col>
          <el-col :span="2" class="ml10">
            <el-button type="primary" class="mt10 qinmoBtn_bg" size="small" @click="query(1)">查询</el-button>
          </el-col>
        </el-col>
      </div>
    </div>

    <!--批量设置-->
    <!--list-->
    <div class="mt30">
      <div class="line"></div>
      <div class="list">
        <el-table
          class="qinmo"
          stripe
          :empty-text="emptyText"
          row-class-name=""
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="status"
            :formatter="statusMatter"
            label="操作状态"
            align="center"
            width="110">
          </el-table-column>
          <el-table-column
            prop="operater"
            label="提交人"
            align="center">
          </el-table-column>
          <el-table-column
            prop="iccid"
            label="ICCID"
            align="center">
          </el-table-column>
          <el-table-column
            prop="actionType"
            label="动作"
            :formatter="actionTypeMatter"
            align="center">
          </el-table-column>
          <el-table-column
            prop="operateType"
            label="操作类型"
            :formatter="actypeMatter"
            align="center"
            width="200">
          </el-table-column>
          <el-table-column
            prop="operateDate"
            label="操作时间"
            width="300"
            align="center">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--分页-->
    <div class="pagination-wrapper" v-show="totalNum">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-size="pagination.size"
        :page-sizes="pagination.sizes"
        layout="prev, pager, next, total, sizes"
        :total="pagination.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import utils from '@/utils/util'
  export default {
    data () {
      return {
        navOption: {
          content: [
            {
              label: '连接管理',
              path: '/'
            },
            {
              label: '注销管理',
              path: '/'
            },
            {
              label: '操作记录',
              path: '/index/actionLog'
            }
          ]
        },
       pagination: {
          total: 0,
          currentPage: 1,
          size: 50,
          sizes: [10, 50, 100]
        },
        departmentOption: [
          {
             label: '全部',
             value: '全部'
          },
          {
             label: '计量',
             value: '计量'
          },
          {
             label: '采购',
             value: '采购'
          },
          {
             label: '配网',
             value: '配网'
          }
        ],
        zoneOption: [
          {
              label: '自动操作',
              value: '0'
          },
          {
              label: '手动操作',
              value: '1'
          }
        ],
        submitMan: '',
        type: '',
        startDate1: '',                                  // 开始时间
        endDate: '',                                   // 结束是时间
        action: '',                                   // 结束是时间
        activeType: '',
        operater: '',                                   // 操作人
        tableData: [],
        isLoading: true,
        accountId: ''
      }
    },
    computed: {
      emptyText () {
        if (this.isLoading) return '正在加载中...'
        return '暂无数据'
      },
      totalNum () {
        return this.pagination.total > 10
      }
    },
    components: {
    },
    created () {
      this.query()
    },
    methods: {
      handleSizeChange (val) {
        this.pagination.size = val
        this.query()
      },
      handleCurrentChange (val) {
        this.pagination.currentPage = val
        this.query()
      },
      setCancel () {
        this.setBox = true
      },
      query (curr) {
        this.isLoading = true
        this.tableData = []
        // this.$http.post('/api/chinaunicom/queryCardRetireRecord', {
        //   startDate  : this.startDate1,      // 开始时间
        //   endDate: !this.endDate ? '' : utils.formatDate(this.endDate) + ' ' + '23' + ':' + '59' + ':' + '59', // 结束时间
        //   // endDate    : this.endDate,        // 结束时间
        //   operater   : this.accountId,       // 提交人
        //   actionType : this.action === '' ? null : this.action,         // 动作
        //   status     : this.type === '' ? null : this.type,           // 操作状态
        //   operateType: this.activeType === '' ? null : this.activeType,      // 操作类型
        //   page       : curr || this.pagination.currentPage,
        //   size       : this.pagination.size || 10
        // })
        // .then(res => {
        //   if (res.data.result_code === 0) {
        //     this.tableData = JSON.parse(res.data.result_data).content
        //     this.pagination.total = JSON.parse(res.data.result_data).total
        //     this.pagination.currentPage = curr || this.pagination.currentPage
        //   }
        //   this.isLoading = false
        // })
      },
      actypeMatter (row) {
        return row.operateType === 1 ? '手动操作' : '自动操作'
      },
      actionTypeMatter (row) {
        return row.actionType === 5 ? '注销' : '停用'
      },
      statusMatter (row) {
        return row.status === 0 ? '成功' : '失败'
      }
    }
  }
</script>
